<html>

<body>
</body>
<script>
    let canvas = document.createElement('canvas');

    document.body.appendChild(canvas);
    let width = 200, height = 200;
    canvas.width = width + 40;
    canvas.height = height + 40;

    let ctx = canvas.getContext('2d');
    let r = width / 2;

    main(ctx);
    setInterval(() => {
        canvas.width = canvas.width;
        main(ctx);
    }, 1000)

    function main(ctx) {

        let now = new Date();
        drawDial(ctx);
        drawScale(ctx);
        drawText(ctx);
        drawHourPointer(ctx, now.getHours(), now.getMinutes())
        drawMinute(ctx, now.getMinutes());
        drawSecond(ctx, now.getSeconds())
        drawCirclePoint(ctx);
    }

    function drawDial(ctx) {
        ctx.beginPath();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.arc(0, 0, r, 0, 2 * Math.PI);
        ctx.lineWidth = 5;
        ctx.stroke();
        ctx.closePath();
    }

    // 绘制表盘数字
    function drawText(ctx) {
        let textR = r - 22;
        for (let i = 1; i < 13; i++) {
            ctx.font = '14px blod arial'
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle';
            var rad = (2 * Math.PI / 12 * i) - Math.PI / 2;
            var x1 = Math.cos(rad) * textR;
            var y1 = Math.sin(rad) * textR;
            ctx.fillText(i, x1, y1);
        }
    }
    // 绘制刻度
    function drawScale(ctx) {
        let textR = r - 6;
        for (let i = 0; i < 60; i++) {
            var rad = (2 * Math.PI / 60 * i);
            var x1 = Math.cos(rad) * textR;
            var y1 = Math.sin(rad) * textR;
            ctx.beginPath()
            if (i % 5 == 0) {
                var x2 = Math.cos(rad) * (textR - 6);
                var y2 = Math.sin(rad) * (textR - 6);
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.lineWidth = 2;
            } else {
                var x2 = Math.cos(rad) * (textR - 4);
                var y2 = Math.sin(rad) * (textR - 4);
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.lineWidth = 1;
            }
            ctx.stroke();
            ctx.closePath();
        }
    }

    // 绘制时针
    function drawHourPointer(ctx, hour, minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 12 * hour;//时针旋转的弧度
        var mrad = 2 * Math.PI / 12 / 60 * minute;//分针旋转的弧度
        ctx.rotate(rad + mrad);
        ctx.lineWidth = 6; //定义时针线的宽度
        ctx.lineCap = "round"; //设置时针线端点为圆的
        ctx.moveTo(0, 10); //移动划线的原点到圆点下面一点 
        ctx.lineTo(0, -r / 2); //画出这条线
        ctx.stroke(); //最终画出这条时针线
        ctx.restore();//返回之前保存过的路径状态和属性
    }

    function drawMinute(ctx, minute) {
        ctx.save();//保存当前环境的状态
        ctx.beginPath();//画出竖着的那个时针的线
        var rad = 2 * Math.PI / 60 * minute;//需要旋转的弧度
        ctx.rotate(rad);
        ctx.lineWidth = 3;//定义分针线的宽度
        ctx.lineCap = "round";//设置时针线端点为圆的
        ctx.moveTo(0, 10); //移动划线的原点到圆点下面一点 
        ctx.lineTo(0, -r + 30); //画出这条线
        ctx.stroke(); //最终画出这条时针线
        ctx.restore();//返回之前保存过的路径状态和属性
    }

    function drawSecond(ctx, second) {
        ctx.save();//保存当前环境的状态
        ctx.beginPath();//画出竖着的那个时针的线
        ctx.strokeStyle = "red";//填充为红色
        var rad = 2 * Math.PI / 60 * second;//需要旋转的弧度
        ctx.rotate(rad);
        ctx.lineWidth = 2;//定义分针线的宽度
        ctx.lineCap = "round";//设置时针线端点为圆的
        ctx.moveTo(0, 10); //移动划线的原点到圆点下面一点 
        ctx.lineTo(0, -r + 30); //画出这条线
        ctx.stroke(); //最终画出这条时针线
          ctx.restore();//返回之前保存过的路径状态和属性
    }

    function drawCirclePoint(ctx) {
        ctx.beginPath();
        ctx.fillStyle = 'white';
        ctx.arc(0, 0, 5, 0, 2 * Math.PI);
        ctx.lineWidth = 1;
        ctx.fill();

        ctx.strokeStyle = 'black';
        ctx.arc(0, 0, 5, 0, 2 * Math.PI);
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.closePath();

    }
</script>

</html>